<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>叶琪</title>
    <!-- 正常情况下：内联样式>内部样式》外部样式 -->
   <!-- 就近原则 -->
     <!--  外部样式  -->
     <link rel="styleheet" type="test/csss" href="csss/Untitled-1.css">
     h3
     {
         color:red;
         text-align:left;
         font-size:8pt;
     }
     <!-- 内部样式 -->
    <style>
        /* h3
{
    text-align:center;
    font-size:20pt;
} */
        body,*{
padding: 0;
margin: 0;
        }
        table{
            border: 1px solid #666;
            background: green;
        }
        .box{
color: hotpink;
        }
        span{
            display: inline-block;
            width: 20px;
            height:20px ;
            border-radius: 20px;
            background: #000;
            text-align: center;
            line-height: 20px;
            color: #fff;
        }
        span[class="dot1"]{
            background: orangered;
            color: pink;
        }
    </style>
   
</head>
<body>
    <!-- 内联样式 -->
   <table style="bottom: 1px solid #666 ;background:pink ;">
       <tr>
           <td>我是一句话</td>
       </tr>
       <tr>
           <td>
               我是一句特别的话
           </td>
       </tr>
       <tr>
           <td>
               我是一条句非常特别的话
           </td>
       </tr>
   </table>
   <hr>
   <h2>选择器</h2>
   <span class="dot1">1</span>
   <span class="dot2">2</span>
   <span class="dot3">3</span>
   <span class="dot4">4</span>
   <span class="dot5">5</span>
   <h3>外部样式</h3>
</body>
</html>